<!--
 * @Autor: 王琛
 * @Description: 主要页面
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#app, .totalContent {
  width: 100%;
  height: 100%;
  position: relative;

  .audio_player, .disclaimerIcon, .audio_btn {
    position: absolute;
    top: 0px;
    z-index: 10;
  }

  .audio_btn {
    width: 20px;
    height: 20px;
    position: fixed;
    top: 5%;
    right: 3%;
  }

  .brandDisplay_box {
    width: 100%;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    pointer-events: none;
    z-index: 100;

    & > img {
      width: 100%;
    }
  }

  .pageLayout {
    width: 100%;
    height: 100%;
    position: relative;
    menu_box_h = 80px;
    display: grid;
    /* grid-template-rows:"calc(100% - %s)" %menu_box_h menu_box_h; */

    grid-template-columns: 100%;
    grid-template-rows:100%;

    .menu_box {
      width: 100%;
      /* height: menu_box_h; */
      position: fixed;
      bottom: -(menu_box_h);
      left: 0px;
      transition: bottom 1.5s;
      z-index: 100;
      background: rgba(0, 0, 0, .75);
    }

    .menu_box_show {
      bottom: 0px;
    }
  }
}
</style>


<template>
  <!-- 免责声明组件 -->
  <transition name="animate__animated animate__" enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
    <disclaimerPopup v-if="_data.isDisclaimer" :config="_state.pageConfig.disclaimer" @close="_data.isDisclaimer = false;turnOnMusic()"></disclaimerPopup>
  </transition>
  <!-- 品牌展示页面 -->
  <div v-show="_state.pageConfig?.poster?.show && _data.animation_poster_name" class="brandDisplay_box" :class="`animate__animated animate__${ _data.animation_poster_name }`">
    <img v-for="(item,index) in _state.pageConfig?.poster?.imgList || []" :key="index" :class="`brandDisplay`" :src="item.url" @load="posterImgLoad(item)"/>
  </div>
  <!-- 页面布局 -->
  <div class="pageLayout">
    <!-- 主路由出口 -->
    <router-view :style="{ height:`calc(100% - ${_data.main_nav_h}px)` }"/>
    <!-- 菜单容器 -->
    <div v-show="_data.main_nav_h" :class="{menu_box:true,menu_box_show:_data.isShowMenu}">
      <menuControl ref="menuControl_el" :config="_state.pageConfig.menu" :key="_state.pageConfig?.menu?.inAnimation || 1"></menuControl>
    </div>
  </div>
  <!-- 音乐按钮 -->
  <img class="audio_btn" :src="_data.musicPlaying ? 'https://zhangduo-tech.com/ProjectInfo/Static/icon/1.png' : 'https://zhangduo-tech.com/ProjectInfo/Static/icon/2.png'" alt="" srcset="" @click="controlPlayback">
  <!-- 音乐播放器 -->
  <audio id="audio_player" class="audio_player" autoplay loop src="https://zhangduo-tech.com/ProjectInfo/Static/mp3/1.mp3"></audio>
</template>


<script setup lang="ts">
import {nextTick, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {login} from "api";

// 引入菜单组件
import menuControl from "src/components/menuControl.vue";
// 引入免责声明组件
import disclaimerPopup from "src/components/disclaimerPopup.vue";

const _props = defineProps({})
const _data = reactive({
  // 海报动画名称
  animation_poster_name: "",
  // 是否显示导航
  isShowMenu: false,
  // 打开免责声明
  isDisclaimer: false,
  // 底部导航高度
  main_nav_h: 57,
  // 是否手控操作
  isManualControl: false,
  // 音乐播放状态
  musicPlaying: false,
});
const _store = useStore()
const _state = _store.state;
const _router = useRouter();
const _route = useRoute();
const menuControl_el = ref(null);
// 获取地址的参数信息
const urlParams = new URLSearchParams(window.location.search);

onBeforeMount(async () => {


  // 获取页面配置
  const pageConfig = import.meta.env.VITE_MODE_NAME !== 'dev' ? await login.mainConfig({name: urlParams.get("appId")}) : await login.mainConfigDev();

  // 更新页面配置
  _state.pageConfig = pageConfig || {};

  // 记录项目的id
  _state.appId = urlParams.get("appId");
})

onMounted(async () => {
  // 获取页面配置
  nextTick(() => {
    window.addEventListener('resize', screenSize);
  })
})
// 监听路由,设置当前路由的打开信息
watch(_route, (newVal) => {
  // 把当前的路由信息记录在VueX里面
  _state.currentRouterInfo = newVal;

});



/**
 * @description: 监听屏幕大小变化,更新变化值
 * @author: 王琛
 * @Date: 2022-07-08 09:50:50
 * @param {*}
 * @return {*}
 */
function screenSize() {
  const w = document.documentElement.clientWidth || 0;
  const h = document.documentElement.clientHeight || 0;
  _state.screenWH = {w, h}
}

/**
 * @description: 海报加载完毕
 * @author: 王琛
 * @Date: 2022-07-08 11:26:14
 * @param { object } item点击的对象
 * @return {*}
 */
function posterImgLoad(item) {
  // 等待所有图片加载完毕之后开始入场动画
  _data.animation_poster_name = _state.pageConfig.poster.inAnimation;
  // 根据设置的海报停留时间设置成出厂动画
  setTimeout(() => {
    // 切换海报显示的动画
    _data.animation_poster_name = _state.pageConfig.poster.outAnimation;
    // 显示导航
    _data.isShowMenu = true;
    // 打开免责声明
    _data.isDisclaimer = true;
    // 从浏览器缓存取看看有没有自动路由
    const browser_autoPage: string = sessionStorage.getItem("autoPage");
    if ((browser_autoPage && browser_autoPage.length != 0) && _data.main_nav_h) _data.main_nav_h = 0;

    // 获取路由参数自动跳转页面以浏览器记录的优先
    const autoPage: any = browser_autoPage != "undefined" ? browser_autoPage : _route.query.autoPage;
    // 记录到浏览器里面
    if (autoPage) sessionStorage.setItem("autoPage", autoPage);
    // 初始化导航内容
    menuControl_el.value?.init && menuControl_el.value?.init(false, autoPage);

  }, _state.pageConfig.poster.dwellTime || 2000)
}

/**
 * @description: 打开音乐
 * @author: 王琛
 * @Date: 2022-09-28 11:45:53
 * @param {*}
 * @return {*}
 */
function turnOnMusic() {
  if (_data.isManualControl) return;
  document.getElementById("audio_player").play()
  _data.musicPlaying = true;
}

/**
 * @description: 右上角音乐按钮功能
 * @author: 王琛
 * @Date: 2022-09-28 11:52:10
 * @param {*}
 * @return {*}
 */
function controlPlayback() {
  if (!_data.isManualControl) _data.isManualControl = true;
  _data.musicPlaying = !_data.musicPlaying
  const el = document.getElementById("audio_player");
  _data.musicPlaying ? el.play() : el.pause();
}
</script>

